<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>设备维修列表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="repair-table">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <span style="margin-left: 30px;">维修结算总工资：{{sumMoney}}</span>
        </template>
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="repair-table-table-div">
        <el-table fit stripe border :data="repairList" style="width: 100%" height="parent">
          <el-table-column label="设备型号" prop="machineModel" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="设备编号" prop="machineSerialNo" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="客户" prop="custCompany" min-width="120px" align="center"></el-table-column>
          <el-table-column label="报修人" prop="custName" min-width="120px" align="center"></el-table-column>
          <el-table-column label="报修人联系电话" prop="custPhone" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="故障原因" prop="workBrokenDescription" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="错误代码" min-width="180px" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.errorCode!==''">
                {{scope.row.errorMsg}} ({{scope.row.errorCode}})
              </span>
            </template>
          </el-table-column>
          <el-table-column label="用户评价" prop="custEvaluation" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="维修人员" prop="workName" min-width="120px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="是否收费" prop="custPayText" min-width="120px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="工单状态" min-width="100px" align="center">
            <template slot-scope="scope">
              <span :class="'repair-order-status_'+scope.row.status">
                {{i18n.getMsg('machineRepair.repairTable.status.'+scope.row.status)}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="申请时间" width="100px" align="center">
            <template slot-scope="scope">
              <span :title="moment(scope.row.createTime).format('YYYY-MM-DD HH:mm')">
                {{moment(scope.row.createTime).format('MM-DD HH:mm')}}
              </span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="维修完成时间" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.workCompleteTime!==null" :title="moment(scope.row.workCompleteTime).format('YYYY-MM-DD HH:mm')">
                {{moment(scope.row.workCompleteTime).format('MM-DD HH:mm')}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="指派耗时" prop="assignDifferTime" min-width="150px" header-align="center">
          </el-table-column>
          <el-table-column label="处理耗时" prop="completeDifferTime" min-width="150px" header-align="center">
          </el-table-column>
          <el-table-column label="处理位置" prop="workCompleteLocation" min-width="150px" header-align="center">
          </el-table-column>
          <el-table-column label="回访评级" prop="visitType" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="回访评价人" prop="visitUser" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="回访时间" width="120px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.visitType!==null">
                {{moment(scope.row.visitTime).format('YYYY-MM-DD HH:mm')}}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="维修评级" prop="salaryType" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column label="维修结算工资" prop="actualSalary" min-width="100px" align="center">
          </el-table-column>
          <el-table-column :resizable="false" label="操作" :width="handleWidth" header-align="center">
            <template slot-scope="scope">
              <div class="table-handle-btns">
                <el-button size="mini" type="primary" @click="lookDetail(scope.row)">查看详情</el-button>
                <el-button size="mini" type="primary" @click="toBalance(scope.row)">结算价格</el-button>
                <el-button v-if="scope.row.status===0" size="mini" type="danger" @click="retreat(scope.row)">申请退回</el-button>
              </div>
              <div v-if="scope.row.status===3" class="table-handle-btns">
                <el-button size="mini" type="primary" @click="visitEvaluate(scope.row)">回访评价</el-button>
                <el-button v-if="scope.row.visitType!==null&&scope.row.starType!==null" size="mini" type="primary" @click="salaryEvaluate(scope.row)">
                  维修评价
                </el-button>
                <el-button size="mini" type="primary" @click="addRecord(scope.row)">新增记录</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="openDialog" top="10vh" @closed="dialogClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <template v-if="openDialog">
          <repair-detail v-if="dialogType==='detail'" :detail="selectRepair"></repair-detail>
          <repair-balance v-else-if="dialogType==='balance'" :repair="selectRepair" @balance-success="balanceSuccess">
          </repair-balance>
          <repair-record-form v-else-if="dialogType==='record'" :repair="selectRepair" type="add" :dropdown-option="dropdownOption"
            @save-success="recordSaveSuccess">
          </repair-record-form>
        </template>
      </div>
    </el-dialog>

    <el-dialog :title="formTitle" :visible.sync="openForm" top="calc(50vh - 150px)" width="400px" @closed="formClosed">
      <div style="height:210px;overflow:auto">
        <template v-if="openForm">
          <visit-setting-form v-if="formType==='visit'" :repair="selectRepair" :dropdown-option="dropdownOption" @setting-success="settingSuccess">
          </visit-setting-form>
          <salary-setting-form v-else-if="formType==='salary'" :repair="selectRepair" :dropdown-option="dropdownOption"
            @setting-success="settingSuccess">
          </salary-setting-form>
        </template>
      </div>
    </el-dialog>
  </div>
</body>

<script src="./myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "/vueSystem/components/css/showTextarea.css",
    "./machineRepair/repairTable/css/searchForm.css",
    "./machineRepair/repairTable/css/repairDetail.css",
    "./machineRepair/repairTable/css/repairBalance.css",
    "./machineRepair/repairTable/css/repairSetting.css",
    "./machineRepair/repairRecord/css/repairRecordForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/showTextarea.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>
<script src="./machineRepair/repairTable/searchForm.js"></script>
<script src="./machineRepair/repairTable/repairDetail.js"></script>
<script src="./machineRepair/repairTable/repairBalance.js"></script>
<script src="./machineRepair/repairTable/repairSetting.js"></script>
<script src="./machineRepair/repairRecord/repairRecordForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        machineModel: '',
        machineSerialNo: '',
        outTimeStart: null,
        outTimeEnd: null,
        workCompleteStartTime: null,
        workCompleteEndTime: null,
        buyer: '',
        custPay: '',
        balancePrice: '',
        status: '',
        workName: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        repairList: [],
        selectRepair: null,
        openDialog: false,
        dialogTitle: '',
        dialogType: '',
        openForm: false,
        formType: '',
        formTitle: '',
        handleWidth: '175px',
        dropdownOption: {},
        sumMoney: 0,
        i18n: i18n,
        moment: moment
      };
    },

    created: function () {
      this.setRepairList(true);
    },

    methods: {
      setRepairList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          watchBord: 0
        };
        this.setPostData(postData);

        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/getApplyList', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var repairList = res.returnData;
          var numFields = ['actualSalary', 'salary'];
          var sumMoney = 0;
          for (var i = 0; i < repairList.length; i++) {
            var repair = repairList[i];

            var custPhoto = repair.custPhoto;
            if (SysUtil.isEmpty(custPhoto)) {
              repair.custPhoto = [];
            } else {
              repair.custPhoto = custPhoto.split(',')
            }

            var custEvaluation = repair.custEvaluation;
            custEvaluation = Number(custEvaluation);
            if (!isNaN(custEvaluation)) {
              repair.starType = custEvaluation;
              repair.custEvaluation = custEvaluation + '星评价';
            } else {
              repair.starType = null;
            }

            for (var j = 0; j < numFields.length; j++) {
              var field = numFields[j];
              var value = repair[field];
              if (value === null) {
                value = '';
              } else {
                value = Number(value);
                value = _.round(value, 2);
              }
              repair[field] = value;
            }

            var actualSalary = repair.actualSalary;
            if (!SysUtil.isEmpty(actualSalary)) {
              sumMoney += actualSalary;
            }

            var createTime = repair.createTime;
            createTime = moment(createTime).valueOf();
            repair.createTime = createTime;

            repair.custPayText = self.getCustPayText(repair);
            repair.assignDifferTime = self.getDifferTime(createTime, repair.assignTime);
            repair.completeDifferTime = self.getDifferTime(repair.assignTime, repair.workCompleteTime);
          }
          sumMoney = _.round(sumMoney, 2);

          self.repairList = repairList;
          self.sumMoney = sumMoney;
          self.pagination.totalCount = res.iTotalRecords;
          self.setHandleWidth();
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setRepairList(true);
      },

      pageChange: function () {
        this.setRepairList();
      },

      setHandleWidth: function () {
        var repairList = this.repairList;
        var btnsCount = 2;
        for (var i = 0; i < repairList.length; i++) {
          var repair = repairList[i];
          var status = repair.status;
          var count = 0;
          if (status === 0) {
            count = 3;
          } else if (status === 3) {
            var visitType = repair.visitType;
            var starType = repair.starType;
            if (visitType === null || starType === null) {
              count = 2;
            } else {
              count = 3;
            }
          }

          if (btnsCount < count) {
            btnsCount = count;
          }

          if (btnsCount === 3) {
            break;
          }
        }

        var handleWidth = btnsCount === 2 ? 174 : 258;
        this.handleWidth = handleWidth + 'px';
      },

      setPostData: function (postData) {
        var search = this.search;
        var fields = ['machineModel', 'machineSerialNo', 'buyer', 'balancePrice', 'status', 'custPay'];
        SysUtil.setPostData(postData, search, fields);

        if (postData.status === undefined) {
          postData.status = -99;
        }

        if (postData.custPay === undefined) {
          postData.custPay = -99;
        }

        var workName = search.workName;
        if (workName !== '') {
          postData.work_name = workName;
        }

        var outTimeStart = search.outTimeStart;
        if (outTimeStart !== null) {
          postData.outTimeStart = moment(outTimeStart).format('YYYY-MM-DD');
        }

        var outTimeEnd = search.outTimeEnd;
        if (outTimeEnd !== null) {
          postData.outTimeEnd = moment(outTimeEnd).endOf('day').format('YYYY-MM-DD HH:mm:ss');
        }

        var workCompleteStartTime = search.workCompleteStartTime;
        if (workCompleteStartTime !== null) {
          postData.workCompleteStartTime = moment(workCompleteStartTime).format('YYYY-MM-DD');
        }

        var workCompleteEndTime = search.workCompleteEndTime;
        if (workCompleteEndTime !== null) {
          postData.workCompleteEndTime = moment(workCompleteEndTime).endOf('day').format('YYYY-MM-DD HH:mm:ss');
        }
      },

      getCustPayText: function (repair) {
        if (repair.status <= 1) {
          return '';
        }

        var balancePrice = repair.balancePrice;
        if (balancePrice === 0) {
          return '不收费已结算';
        }

        var custPay = repair.custPay;
        custPay = Number(custPay);
        var custPayText = custPay === 1 ? '收费' : '不收费';
        if (balancePrice === null) {
          var str = custPay === 1 ? '待结算' : '已结算';
          custPayText += str;
        } else {
          if (custPay === 1) {
            custPayText += '已结算';
          }
        }
        return custPayText;
      },

      getDifferTime: function (data1, data2) {
        if (SysUtil.isEmpty(data1) || SysUtil.isEmpty(data2)) {
          return '';
        }

        if (typeof data1 === 'string') {
          data1 = moment(data1).valueOf();
        }

        if (typeof data2 === 'string') {
          data2 = moment(data2).valueOf();
        }

        var time = moment(data2).diff(data1);
        time = moment.duration(time);

        var differTime = '';
        var day = time.days();
        if (day > 0) {
          differTime += `${day}天`;
        }

        var hour = time.hours();
        if (hour > 0) {
          differTime += `${hour}小时`;
        }

        var minute = time.minutes();
        if (minute > 0) {
          differTime += `${minute}分钟`;
        }

        if (differTime === '') {
          var second = time.seconds();
          if (second > 0) {
            differTime += `${second}秒`;
          }
        }
        return differTime;
      },

      lookDetail: function (repair) {
        this.selectRepair = repair;
        this.dialogTitle = '工单详情';
        this.dialogType = 'detail';
        this.openDialog = true;
      },

      toBalance: function (repair) {
        this.selectRepair = repair;
        this.dialogTitle = '结算价格';
        this.dialogType = 'balance';
        this.openDialog = true;
      },

      addRecord: function (repair) {
        this.selectRepair = repair;
        this.dialogTitle = '新增维修记录';
        this.dialogType = 'record';
        this.openDialog = true;
      },

      balanceSuccess: function () {
        this.openDialog = false;
        this.setRepairList();
      },

      recordSaveSuccess: function () {
        this.openDialog = false;
      },

      dialogClosed: function () {
        this.selectRepair = null;
        this.dialogTitle = '';
        this.dialogType = '';
      },

      retreat: function (repair) {
        var self = this;
        this.$confirm('是否确定退回该维修工单', '退回确认', {
          confirmButtonText: '是',
          cancelButtonText: '否'
        }).then(function () {
          self.toRetreat(repair);
        }).catch(function () {});
      },

      toRetreat: function (repair) {
        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/updateApplyOrderStatus', {
          id: repair.id,
          status: -2
        }).then(function () {
          self.loading = false;
          self.$alert('该工单成功退回', '信息', {
            callback: function () {
              self.setRepairList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      visitEvaluate: function (repair) {
        this.formType = 'visit';
        this.formTitle = '设置回访评价';
        this.selectRepair = repair;
        this.openForm = true;
      },

      salaryEvaluate: function (repair) {
        this.formType = 'salary';
        this.formTitle = '设置维修评价';
        this.selectRepair = repair;
        this.openForm = true;
      },

      settingSuccess: function () {
        this.openForm = false;
        this.setRepairList();
      },

      formClosed: function () {
        this.formType = '';
        this.formTitle = '';
        this.selectRepair = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      RepairDetail: RepairDetail,
      RepairBalance: RepairBalance,
      VisitSettingForm: VisitSettingForm,
      SalarySettingForm: SalarySettingForm,
      RepairRecordForm: RepairRecordForm
    }
  });

</script>

<style>
  .repair-table {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .repair-table .repair-table-table-div {
    flex: 1;
    overflow: auto;
  }

  .repair-table .repair-table-table-div .repair-order-status_0 {
    color: #ff0000;
  }

  .repair-table .repair-table-table-div .repair-order-status_1 {
    color: #FFA500;
  }

  .repair-table .repair-table-table-div .repair-order-status_2 {
    color: #00ff00;
  }

  .repair-table .repair-table-table-div .repair-order-status_3 {
    color: #00ff00;
  }

  .repair-table .repair-table-table-div .el-button+.el-button {
    margin-left: 0;
  }

  .repair-table .repair-table-table-div .table-handle-btns {
    margin-bottom: 5px;
  }

  .repair-table .repair-table-table-div .table-handle-btns:last-child {
    margin-bottom: 0;
  }

</style>

</html>
